<%@page language="java" contentType="text/html; character=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>管理员后台</title>
    <link rel="stylesheet" href="${ctx}/resource/css/pintuer.css">
    <link rel="stylesheet" href="${ctx}/resource/css/admin.css">
    <link href="${ctx}/resource/js/bootstrap-3.3.6/css/bootstrap.css" rel="stylesheet">
    <script src="${ctx}/resource/js/jquery.js"></script>
    <script src="${ctx}/resource/js/pintuer.js"></script>
    <script src="${ctx}/resource/js/bootstrap-3.3.6/js/bootstrap.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <form action="${ctx}/user/findBySql" id="listform" method="post">
        <div class="padding border-bottom">
            <ul class="search" style="padding-left: 10px;">
                <li>
                    <input type="text" placeholder="请输入用户名" name="userName" class="input" value="${obj.userName}"
                        style="width: 250px;line-height: 17px;display: inline-block" />
                    <a href="javascript:void(0)" onclick="changeSearch()" class="button border-main icon-search">搜索</a>
                </li>
            </ul>
        </div>
    </form>
    <table class="table table-hover text-center">
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>手机号</th>
            <th>真实姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
    <c:forEach items="${pagers.datas}" var="data" varStatus="l">
        <tr>
            <td>${data.userName}</td>
            <td>${data.passWord}</td>
            <td>${data.phone}</td>
            <td>${data.realName}</td>
            <td>${data.sex}</td>
            <td>${data.email}</td>
            <td>${data.address}</td>
            <td>
                <button btnId="${data.id}" type="button" class="btn btn-primary border-main icon-edit xiuGaiBtn" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">修改</button>
                <a class="button border-red" href="${ctx}/user/deleteUser?id=${data.id}"><span class="icon-trash-o">删除</span></a>
            </td>
        </tr>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                            <h4 class="modal-title" id="exampleModalLabel">修改用户信息</h4>
                        </div>
                        <div class="modal-body">
                            <form id="userTable" <%--action="${ctx}/user/saveUser" method="post"--%> >
                                <div class="form-group">
                                    <label  class="control-label">id:</label>
                                    <input type="text" name="id" class="form-control" id="id" value="${data.id}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">用户名:</label>
                                    <input type="text" name="userName" class="form-control" id="name" value="${data.userName}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">密码:</label>
                                    <input type="text" name="passWord" class="form-control" id="message-passWord" value="${data.passWord}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">手机号:</label>
                                    <input type="text" name="phone" class="form-control" id="message-phone" value="${data.phone}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">真实姓名:</label>
                                    <input type="text" name="realName" class="form-control" id="message-name" value="${data.realName}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">性别:</label>
                                    <%--<input type="text" class="form-control" id="message-sex" value="${data.sex}">--%>
                                    <select style="outline: none;border: 1px solid #ddd;height: 30px;" name="sex" id="message-sex">
                                        <option value="男" ${obj.sex=='男'?'selected="selected"':''}>男</option>
                                        <option value="女" ${obj.sex=='女'?'selected="selected"':''}>女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">邮箱:</label>
                                    <input type="text" name="email" class="form-control" id="message-email" value="${data.email}">
                                </div>
                                <div class="form-group">
                                    <label  class="control-label">地址:</label>
                                    <input type="text" name="address" class="form-control" id="message-addrre" value="${data.address}">
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" id="baoCun" <%--name="_method" value="put"--%>>保存</button>
                        </div>
                    </div>
                </div>
            </div>

    </c:forEach>
        <tr>
            <td colspan="8">
                <div class="pagelist">
                    <!--分页开始-->
                    <pg:pager url="${ctx}/user/findBySql" maxIndexPages="5" items="${pagers.total}" maxPageItems="15" export="curPage=pageNumber">
                        <pg:last>
                            共${pagers.total}记录，共${pageNumber}页，
                        </pg:last>
                        当前第${curPage}页
                        <pg:first>
                            <a href="${pageUrl}">首页</a>
                        </pg:first>
                        <pg:prev>
                            <a href="${pageUrl}">上一页</a>
                        </pg:prev>
                        <pg:pages>
                            <c:choose>
                                <c:when test="${curPage eq pageNumber}">
                                    <font color="red">[${pageNumber}]</font>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageUrl}">${pageNumber}</a>
                                </c:otherwise>
                            </c:choose>
                        </pg:pages>
                        <pg:next>
                            <a href="${pageUrl}">下一页</a>
                        </pg:next>
                        <pg:last>
                            <c:choose>
                                <c:when test="${curPage eq pageNumber}">
                                    <font color="red">尾页</font>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageUrl}">尾页</a>
                                </c:otherwise>
                            </c:choose>
                        </pg:last>
                    </pg:pager>
                </div>
            </td>
        </tr>
    </table>
</div>
<script>
    function changeSearch(){
        $("#listform").submit();
    }

    $(".xiuGaiBtn").click(function(){
        //2、查出员工信息，显示员工信息
        var id = $(this).attr("btnId")
        console.log(id);
        getUser(id);
    });



    //点击保存，保存更改后的用户信息
    $("#baoCun").click(function(){
        var id = $(this).attr("btnId")
        //2、发送ajax请求保存更新的员工信息
        var id = $("#id").val();
        var userName = $("#name").val();
        var passWord = $("#message-passWord").val();
        var phone = $("#message-phone").val();
        var name = $("#message-name").val();
        var sex = $("#message-sex").val();
        var email = $("#message-email").val();
        var addrre = $("#message-addrre").val();
        $.ajax({
            url:"${ctx}/user/saveUser",
            type:"POST",
            data:{
                "id":id,
                "userName":userName,
                "passWord":passWord,
                "phone":phone,
                "realName":name,
                "sex":sex,
                "email":email,
                "address":addrre,
            },
            success:function(){
                //1、关闭对话框
                $("#exampleModal").modal('hide');
                alert("修改成功！");
                window.location.href = "${ctx}/user/findBySql";
            }
        });
    });


    /*
    * 根据id拿到用户信息并赋值到模态框
    * */
    function getUser(id){
        $.ajax({
        url:"${ctx}/user/getUser?id="+id,
        type:"GET",
        success:function(result){
            /*console.log("成功后的回调"+result.message);
            * 没用，看不到结果，还不如到NetWork里面看请求的Response是不是有后台数据返回就行，
            * 然后根据具体调用拿到值就行
            * */
            var usrData = result.message;
            $("#id").val(usrData.id);
            $("#name").val(usrData.userName);
            $("#message-passWord").val(usrData.passWord);
            $("#message-phone").val(usrData.phone);
            $("#message-name").val(usrData.realName);
            $("#message-sex").val(usrData.sex);
            $("#message-email").val(usrData.email);
            $("#message-addrre").val(usrData.address);
            },
        });
    }


</script>

</body>

</html>